<%@ page contentType="text/html; charset=UTF-8" %>
<html>
<head>
<% String productCode=(String)request.getAttribute("productCode"); 
 %>
    <title>上传图片</title>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="UploadDialog/css/Ext.ux.UploadDialog.css" />
 <script type="text/javascript" src="js/ext/ext-base.js"></script>
 <script type="text/javascript" src="js/ext/ext-all.js"></script>
 <script type="text/javascript" src="UploadDialog/Ext.ux.UploadDialog.js"></script>
 <script type="text/javascript" src="UploadDialog/Ext.ux.UploadDialog.packed.js"></script>
   <script src="js/ext/data-view-plugins.js"></script>
    <style type="text/css">
        #custom {
            cursor:move;
        }
        #custom-rzwrap{
            z-index: 100;
        }
        #custom-rzwrap .x-resizable-handle{
            width:11px;
            height:11px;
            background:transparent url(/images/square.gif) no-repeat;
            margin:0px;
        }
        #custom-rzwrap .x-resizable-handle-east, #custom-rzwrap .x-resizable-handle-west{
            top:45%;
        }
        #custom-rzwrap .x-resizable-handle-north, #custom-rzwrap .x-resizable-handle-south{
            left:45%;
        }
    </style>
    <script>
    window.focus();
    Ext.onReady(function(){
//        var xd = Ext.data;
        Ext.QuickTips.init();

        var store = new Ext.data.JsonStore({
            url: "/gw/servlet/ProductPictureShowServlet?productCode=<%=productCode%>&type=1",
            root: 'images',
            fields: ['name', 'url', {name:'size', type: 'float'}]//, {name:'date', type:'date', dateFormat:'timestamp'}]
        });
        
        store.load();

        var tpl = new Ext.XTemplate(
		    '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
		        '<div class="thumb"><img src="{url}" title="{name}"></div>',
		        '<span class="">{shortName}</span>',
		        '<span>{sizeString}</span>',
//		        '<span>{dateString}</span>',
		        '</div>', //x-editable可编辑  .thumb-wrap span
            '</tpl>',
            '<div class="x-clear"></div>'
	    );
	    
//	    var win = new Ext.Window({
//    	    title: "显示图片",
//    	    resizable: false,
//    	    closable:false,
//    	    closeAction:'close',
//    	    modal: true,
//    	    width: '600px',
//    	    height: '500px',
//    	    contentEl: "div1",
//    	    buttonAlign: "center",
//    	    buttons: [{
//    	        text:"关闭",
//    	        handler: function(){
//        	        win.hide();
//    	        }
//    	    }]
//	    });
        var customEl;
        var ResizableExample = {
            init: function(){
                var custom = new Ext.Resizable('custom', {
                    wrap:true,
                    pinned:true,
                    minWidth:50,
                    minHeight: 50,
                    preserveRatio: true,
                    handles: 'all',
                    draggable:true,
                    dynamic:true
                });
                customEl = custom.getEl();
                // move to the body to prevent overlap on my blog
                document.body.insertBefore(customEl.dom, document.body.firstChild);
                
                customEl.on('dblclick', function(){
                    customEl.hide(true);
                });
                customEl.hide();
                
//                Ext.get('showMe').on('click', function(){
//                    customEl.center();
//                    customEl.show(true);
//                });
            }
        };

        Ext.EventManager.onDocumentReady(ResizableExample.init, ResizableExample, true);
	    
	    var dataview = new Ext.DataView({
            store: store,
            id: "dv",
            tpl: tpl,
//            height: 300,
            autoHeight:true,
//            simpleSelect: true,
            multiSelect: true,
//            singleSelect: true,
            overClass:'x-view-over',
            itemSelector:'div.thumb-wrap',
            emptyText: 'No images to display',

            plugins: [
                new Ext.DataView.DragSelector()
//                new Ext.DataView.LabelEditor({dataIndex: 'name'})
            ],

            prepareData: function(data){
                data.shortName = Ext.util.Format.ellipsis(data.name, 15);
                data.sizeString = Ext.util.Format.fileSize(data.size);
//                data.dateString = data.date.format("m/d/Y g:i a");
                return data;
            },
            
            listeners: {
        	    selectionchange: {
        		    fn: function(dv,nodes){
        		        var count = dataview.getSelectionCount();
        			    var l = nodes.length;
        				var s= '';
        			    for(var i = 0; i < count; i++)
           				{
             			   s =  dataview.getSelectedNodes()[i].id;//l != 1 ? 's' : ''; 
          				}
        			     panel.setTitle('图片列表 ('+l+' 项'+s+' 被选中)');
        		    }
        	    }
            }
        })

        var panel = new Ext.Panel({
            id:'images-view',
            frame:true,
            width:535,
            autoHeight:true,
            collapsible:true,
            layout:'fit',
            title:'图片列表(0 项 被选中)',
            tbar:[
                {text: "添加图片", handler: insertImages}, "-",
                {text: "删除图片", handler: deleteImages},
                {text: "添加默认图片", handler: insertDefaultImages}, "-"
            ],
            butttonAlign: "left",
            tools: [{
                id:"refresh",
                qtip:"刷新图片列表",
                on:{click:function(){
    	                panel.body.mask("加载中...", 'x-mask-loading');
    	                
    	                setTimeout(function(){
    	                    store.reload();
        	                panel.body.unmask();
    	                }, 1000);
	                }
                }
            }],
            items: dataview
        });
        panel.render("divP");
        
        function insertImages()
        {
            dialog = new Ext.ux.UploadDialog.Dialog({
                  url: "/gw/servlet/ProductPictureUploadServlet?productCode=<%=productCode%>",
		          width : 450,
		          height : 300,
		          minWidth : 450,
		          minHeight : 300,
		          draggable : true,
		          resizable : true,
		          modal: true,
                  reset_on_hide: false,
                  allow_close_on_upload: false,   //关闭上传窗口是否仍然上传文件
                  upload_autostart: false   //是否自动上传文件
                });
                
            dialog.show('show-button');
        }
        
          function insertDefaultImages()
        {
            dialog = new Ext.ux.UploadDialog.Dialog({
                  url: "/gw/servlet/ProductPictureUploadServlet?productCode=<%=productCode%>&type=1",
		          width : 450,
		          height : 300,
		          minWidth : 450,
		          minHeight : 300,
		          draggable : true,
		          resizable : true,
		          modal: true,
                  reset_on_hide: false,
                  allow_close_on_upload: false,   //关闭上传窗口是否仍然上传文件
                  upload_autostart: false   //是否自动上传文件
                });
                
            dialog.show('show-button');
        }
        
        function deleteImages()
        {
            var count = dataview.getSelectionCount();
            var nodes = new Array();
            
            if(count == 0)
            {
                Ext.Msg.show({
                    title:"提示框",
                    msg:"请选择要删除的图片",
                    buttons:Ext.MessageBox.OK , 
                    icon:Ext.MessageBox.INFO
                });
                
                return false;
            }
            
            for(var i = 0; i < count; i++)
            {
                nodes[i] = dataview.getSelectedNodes()[i].id;
            }
            
            Ext.Msg.confirm("提示框","你确认删除所选图片吗",function(button){ 
                if (button == "yes")
                {
                    Ext.MessageBox.show({
                        msg:"请等待...",
                        progress:true,
                        progressText: '删除中...',
                        width:300,
                        wait:true,
                        waitConfig:{
                              interval:100,
                              duration:1000,
                              fn:function(){
                                  Ext.Ajax.request({
                                      url: "/gw/servlet/ProductPictureShowServlet?productCode=<%=productCode%>&type=2",
                                      method : 'GET',
                                      params: {
                                          Nodes: nodes
                                      },
                                      
                                      callback: function(options, success, response)
                                      {
                                          if(success)
                                          {
                                               Ext.Msg.show({
                                                   title:"提示框",
                                                   msg:"删除图片成功",
                                                   buttons:Ext.MessageBox.OK , 
                                                   icon:Ext.MessageBox.INFO,
                                                   fn:function(){
                                                       window.location.reload();
                                                   }
                                               });
                                          }
                                          else
                                          {
                                               Ext.Msg.show({
                                                   title:"提示框",
                                                   msg:"删除图片失败, 请重试",
                                                   buttons:Ext.MessageBox.OK , 
                                                   icon:Ext.MessageBox.WARNING
                                               });   
                                          }
                                      }
                                  });
                                  
                                  Ext.MessageBox.hide();
                        }},
                        closable:true
                    });
                }
            });
        }
    });
    </script>
</head>
<body>
   <div id="divP"></div>
   <div id="div1" style="text-align:center; vertical-align:middle"><img id="custom" width="200" height="150" style="position:absolute;left:0;top:0;" /></div>
</body>
</html>
